<template>
  <div class="home-layout">
    <el-form :inline="true">
      <el-form-item label="工艺规程编号">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="零件名称">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="产品型号">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="零件图号">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="版次">
        <el-input></el-input>
      </el-form-item>
    </el-form>
    <TablePro v-loading="loading" class="table-box" :border="true" :columns="columns" :data="data">
      <template #tools>
        <el-button icon="Search" type="primary">查询</el-button>
        <el-button icon="Plus" type="primary" plain>新增</el-button>
        <el-button icon="Delete" type="danger" plain>删除</el-button>
        <el-button icon="Edit" type="success" plain>修改</el-button>
        <el-button icon="Download" type="info" plain>导入</el-button>
        <el-button icon="Upload" type="warning" plain>导出</el-button>
      </template>
    </TablePro>
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from "vue";
import type { TableProCloumn } from "@/typings";
import TablePro from "@/components/TablePro/TablePro.vue";
import { RouterLink } from "vue-router";
import { ElMessage } from "element-plus";
import { getCraftList } from "@/api";

const loading = ref<boolean>(false);
const data = ref<any[]>([]);
const columns = ref<TableProCloumn[]>([
  {
    type: "index",
    label: "序号",
    width: 80
  },
  {
    label: "工艺规程编号",
    prop: "procedureCode",
    width: 200,
    render: ({ row }) => <RouterLink to={"/CraftRuleDetails/" + row.id + "/" + row.partName}>{row.procedureCode}</RouterLink>
  },
  {
    label: "零件名称",
    prop: "partName",
    width: 120
  },
  {
    label: "产品型号",
    prop: "partType",
    width: 120
  },
  {
    label: "零件图号",
    prop: "partMap",
    width: 200
  },
  {
    label: "版次",
    prop: "versions",
    width: 120
  },
  {
    label: "阶段标记",
    prop: "signStage",
    width: 120
  },
  {
    label: "关键件",
    prop: "keyParts",
    width: 120
  },
  {
    label: "重要件",
    prop: "keySignificance",
    width: 120
  },
  {
    label: "疲劳关键件",
    prop: "fatigueCritical",
    width: 120
  },
  {
    label: "工艺鉴定",
    prop: "processEvaluation",
    width: 120
  },
  {
    label: "生产定型",
    prop: "productionPattern",
    width: 120
  },
  {
    label: "设计鉴定",
    prop: "designVerification",
    width: 120
  },
  {
    label: "高价值",
    prop: "highValue",
    width: 120
  },
  {
    label: "风险控制",
    prop: "riskControl",
    width: 120
  },
  {
    label: "发布号",
    prop: "edition",
    width: 120
  },
  {
    label: "受控状态",
    prop: "controlledState",
    width: 120
  },
  {
    label: "发布日期",
    prop: "issueDate",
    width: 200
  },
  {
    label: "实施日期",
    prop: "carryOutDate",
    width: 200
  },
  {
    label: "批准日期",
    prop: "allowDate",
    width: 200
  },
  {
    label: "录入日期",
    prop: "enterDate",
    width: 200
  },
  {
    label: "更新日期",
    prop: "updateTime",
    width: 200
  }
]);
onMounted(() => {
  init();
});

const init = async () => {
  try {
    loading.value = true;
    const result = await getCraftList();
    if (result.code === 200) {
      data.value = result.data;
      return;
    }
    ElMessage.error(result.message);
  } catch (error) {
    ElMessage.error("请求失败，请稍后再试");
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="scss">
.home-layout {
  width: 100%;
  height: 100%;
  .table-box {
    height: calc(100% - 50px);
  }
}
</style>
